package com.csw.compose.ui.module.animation

import androidx.compose.animation.AnimatedContent
import androidx.compose.animation.Crossfade
import androidx.compose.animation.core.tween
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.animation.togetherWith
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Refresh
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.csw.compose.theme.pagePadding
import com.csw.compose.ui.Destination
import com.csw.compose.ui.components.BodyText
import com.csw.compose.ui.components.LabelText
import com.csw.compose.ui.components.LargeSpacer
import com.csw.compose.ui.components.NormalSpacer
import com.csw.compose.ui.components.OlItem
import com.csw.compose.ui.components.PrimaryTitle
import com.csw.compose.ui.components.UlItem
import com.csw.compose.ui.module.BasePage
import com.csw.compose.ui.module.component.custom.CircleLoading
import kotlinx.coroutines.delay

@Preview
@Composable
fun ContentSwitchAnimationPagePreview() {
    BasePage({}, "内容切换动画") {
        ContentSwitchAnimationPage()
    }
}

class ContentSwitchAnimationPageData {
    companion object : Destination("ContentSwitchAnimationPage")
}

enum class UiState {
    LOADING,
    ERROR,
    LOADED,
}

@Composable
fun ContentSwitchAnimationPage() {
    Column(
        modifier = Modifier
            .padding(horizontal = pagePadding)
            .verticalScroll(rememberScrollState())
    ) {
        PrimaryTitle("简介")
        BodyText("不同组件切换显示时执行动画，类似ViewSwitcher")
        NormalSpacer()
        var times by remember { mutableIntStateOf(0) }
        var uiState by remember { mutableStateOf(UiState.LOADING) }
        AnimatedContent(
            uiState,
            transitionSpec = {
                fadeIn(tween()) togetherWith fadeOut(tween())
            }
        ) {
            when (it) {
                UiState.LOADING -> {
                    Box(
                        modifier = Modifier
                            .fillMaxWidth()
                            .height(150.dp),
                        contentAlignment = Alignment.Center
                    ) {
                        CircleLoading(Modifier.size(60.dp))
                    }
                    LaunchedEffect(Unit) {
                        delay(3 * 1000L)
                        uiState = if (times % 2 == 0) {
                            UiState.ERROR
                        } else {
                            UiState.LOADED
                        }
                        times++
                    }
                }

                UiState.ERROR -> {
                    Box(
                        modifier = Modifier
                            .fillMaxWidth()
                            .height(150.dp)
                            .clickable {
                                uiState = UiState.LOADING
                            },
                        contentAlignment = Alignment.Center
                    ) {
                        Column(horizontalAlignment = Alignment.CenterHorizontally) {
                            Icon(Icons.Filled.Refresh, "", tint = MaterialTheme.colorScheme.error)
                            Text("网络错误，重新加载？", color = MaterialTheme.colorScheme.error)
                        }
                    }
                }

                UiState.LOADED -> {
                    Box(
                        modifier = Modifier
                            .fillMaxWidth()
                            .height(150.dp)
                            .background(Color.Red)
                            .clickable {
                                uiState = UiState.LOADING
                            },
                        contentAlignment = Alignment.Center
                    ) {
                        Text("1111111111111111111111111111\n22222222222222222222222222222222\n3333333333333333333333333333")
                    }
                }
            }
        }
        UlItem("AnimatedContent")
        LabelText("内容切换动画组件")

        NormalSpacer()
        OlItem(1,"transitionSpec")
        LabelText("变换规格，由进入动画与退出动画组成，默认淡入+放大，退出动画为淡出")

        LargeSpacer()
        Crossfade(uiState) {
            when (it) {
                UiState.LOADING -> {
                    Box(
                        modifier = Modifier
                            .fillMaxWidth()
                            .height(150.dp),
                        contentAlignment = Alignment.Center
                    ) {
                        CircleLoading(Modifier.size(60.dp))
                    }
                    LaunchedEffect(Unit) {
                        delay(3 * 1000L)
                        uiState = if (times % 2 == 0) {
                            UiState.ERROR
                        } else {
                            UiState.LOADED
                        }
                        times++
                    }
                }

                UiState.ERROR -> {
                    Box(
                        modifier = Modifier
                            .fillMaxWidth()
                            .height(150.dp)
                            .clickable {
                                uiState = UiState.LOADING
                            },
                        contentAlignment = Alignment.Center
                    ) {
                        Column(horizontalAlignment = Alignment.CenterHorizontally) {
                            Icon(Icons.Filled.Refresh, "", tint = MaterialTheme.colorScheme.error)
                            Text("网络错误，重新加载？", color = MaterialTheme.colorScheme.error)
                        }
                    }
                }

                UiState.LOADED -> {
                    Box(
                        modifier = Modifier
                            .fillMaxWidth()
                            .height(150.dp)
                            .background(Color.Red)
                            .clickable {
                                uiState = UiState.LOADING
                            },
                        contentAlignment = Alignment.Center
                    ) {
                        Text("1111111111111111111111111111\n22222222222222222222222222222222\n3333333333333333333333333333")
                    }
                }
            }
        }
        UlItem("Crossfade")
        LabelText("与AnimatedContent相比，只是简单的淡入淡出动画")
    }
}